<style lang="scss" scoped>
.searchdoctor {
  background: #f9f9f9;
}

.search {
  width: 100%;
  height: 4rem;
  line-height: 4rem;
  text-align: center;
  position: relative;
  background: white;

  input {
    width: 95%;
    height: 2.5rem;
    border-radius: 20px;
    border: solid 2.4px #c2f0d0;
    padding: 0 2.8rem;
  }

  .searchicon {
    position: absolute;
    top: 1.3rem;
    left: 1.5rem;
  }
}

.consultdoctor {
  width: 95%;
  height: 4rem;
  background: #fff;
  margin: .5rem auto;
  display: flex;
  align-items: center;

  .center {
    line-height: 2rem;

    h3 {
      font-weight: normal;
      font-size: 1rem;
    }

    p {
      color: #999;
      font-size: .9rem;
    }
  }

  .right {
    background: #fff;
    border: solid 1px #2fdf64;
    border-radius: 1rem;
    color: #0be54d;
    font-size: 14px;
    padding: 3px 8px;
  }
}

.handbox {
  width: 95%;
  height: 4rem;
  display: flex;

  >div {
    width: 49%;
    display: flex;
    align-items: center;
    background: white;

    div {
      margin: 0;

      h4 {
        font-weight: 500;
        margin-bottom: 6px;
      }

      p {
        font-size: 12px;
      }
    }

  }

  .authority {
    margin-right: .5rem;
  }
}

.By_Subject {
  width: 95%;
  margin-top: 10px;
  padding: 8px;
  background-color: white;

  .Subject {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .gengduo {
      color: #bebebe;
      width: 10rem;
      margin-left: 200px;
    }
  }

  .Department {

    // overflow-x: scroll;
    .grid-container {
      margin: 0 auto;
      overflow-x: auto;
      border-radius: .5rem;

      .van-grid {
        width: 300%;
        display: flex;
        flex-wrap: wrap;

        img {
          width: 30px;
          height: 30px;
        }

        p {
          font-size: 14px;
        }
      }
    }
  }
}

.By_disease {
  width: 95%;
  margin-top: 10px;
  background-color: white;
  padding: 10px;

  .disease {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;

    .gengduo {
      color: #bebebe;
      width: 10rem;
      margin-left: 200px;
    }
  }

  .diseasechildren {
    >div {
      display: flex;
      flex-wrap: wrap;
      
      span {
        border: 1px solid #44d477;
        color: #44d477;
        background-color: rgba(140, 249, 140, 0.1);
        padding: 0.4rem 0.6rem;
        font-size: 0.8rem;
        margin: 0 3px;
        margin-bottom: 0.3rem;
      }
    }
  }
}

.tablist {
  padding: 20px 10px;
  background: white;
  margin: 10px;
  border-radius: 6px;

  .top {
    display: flex;

    .left {
      width: 50px;
      margin: 0 5px;

      img {
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 1.5px solid #44d477;
      }
    }

    .right {
      margin: 0;
      line-height: 20px;

      .right-top {
        display: flex;
        margin: 5px 0;

        span {
          margin: 0;
        }

        .border::after {
          display: block;
          width: 10px;
          text-align: center;
          height: 10px;
          margin-top: 5px;
          border-right: 1px solid #ccc;
          content: "";
        }

        .title {
          margin-left: 8px;
          font-size: 14px;
        }

        .tag {
          margin-left: 5px;
          font-size: 13px;
          padding: 1px 2px;
          background: #e4eef4;
          color: rgb(44, 116, 224);
        }
      }

      .right-bottom {
        span {
          margin: 0 3px;
        }

        .hospital {
          font-size: 14px;
        }

        .type {
          background: #1cc381;
          color: white;
          font-size: 14px;
          padding: 1px 3px;
          border-radius: 3px;
        }

        .tagname {
          font-size: 13px;
          background-color: rgba(244, 226, 184, 0.849);
          color: rgba(147, 106, 9, 0.849);
        }
      }
    }
  }

  .middle {
    margin: 10px 0;

    div {
      width: 95%;
      font-size: 14px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    p {
      margin: 10px;

      span {
        color: #999;
        font-size: 14px;
        margin-right: 20px;
      }

      .xing {
        color: #6c6b6b;
        font-weight: 600;

        img {
          width: 14px;
          height: 14px;
        }
      }

      .num {
        span {
          font-weight: 600;
          color: #6c6b6b;
        }
      }
    }
  }

  .bottom {
    width: 95%;

    span {
      padding: 5px;
      border: 1.5px solid #44d477;
      border-radius: 15px;
      color: #1cc381;
      font-size: 14px;
    }
  }
}
</style>

<template>
  <div class="searchdoctor">
    <div>
      <!-- 返回首页 -->
      <van-nav-bar title="找医生" left-arrow @click-left="onClickLeft" van-nav-bar-icon-color="black" />
    </div>
    <div class="search">
      <!-- 搜索病情 -->
      <input type="text" placeholder="输入症状、疾病、医院、科空、医生" @click="tosearch" />
      <img src="../../assets/search.jpg" alt="" class="searchicon" />
    </div>
    <!--一键找医生-->
    <div class="consultdoctor">
      <div class="left">
        <img src="../../assets/tx.jpg" alt="" />
      </div>
      <div class="center">
        <h3>描述病情找医生</h3>
        <p>智能病情分析，精准推荐医生</p>
      </div>
      <div class="right" @click="wenzhen">
        一键找医生
      </div>
    </div>
    <!--权威专家-->
    <div class="handbox">
      <div class="authority">
        <div>
          <img src="../../assets/zj.jpg" alt="" />
        </div>
        <div class="text">
          <h4 style="color: black">权威专家</h4>
          <p style="color: #bebebe">三甲名医 特级专家</p>
        </div>
      </div>
      <!--特惠义诊-->
      <div class="Free_clinic">
        <div><img src="../../assets/yj.jpg" alt="" /></div>
        <div class="text">
          <h4 style="color: black">特惠义诊</h4>
          <p style="color: #bebebe">限时折扣 高性价比</p>
        </div>
      </div>
    </div>
    <!--按科室-->
    <div class="By_Subject">
      <div class="Subject">
        <div style="color: black; width: 10rem">按科室</div>
        <div class="gengduo">更多科室></div>
      </div>
      <div class="Department">
        <div class="grid-container">
          <van-grid class="danhang1" :border="false" column-num="13">
            <van-grid-item class="gg" @click="departmentSearch('皮肤科')">
              <img src="../../assets/img/grid_01.png" alt="">
              <p>皮肤科</p>
            </van-grid-item>
            <van-grid-item class="gg" @click="departmentSearch('儿科')">
              <img src="../../assets/img/grid_02.png" alt="">
              <p>儿科</p>
            </van-grid-item>
            <van-grid-item class="gg" @click="departmentSearch('妇科')">
              <img src="../../assets/img/grid_03.png" alt="">
              <p>妇科</p>
            </van-grid-item>
            <van-grid-item class="gg" @click="departmentSearch('外科')">
              <img src="../../assets/img/grid_04.png" alt="">
              <p>外科</p>
            </van-grid-item>
            <van-grid-item class="gg" @click="departmentSearch('耳鼻咽喉科')">
              <img src="../../assets/img/grid_05.png" alt="">
              <p>耳鼻咽喉科</p>
            </van-grid-item>
            <van-grid-item class="gg" @click="departmentSearch('精神科')">
              <img src="../../assets/img/grid_06.png" alt="">
              <p>精神科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_07.png" alt="">
              <p>泌尿外科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_08.png" alt="">
              <p>呼吸内科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_09.png" alt="">
              <p>肿瘤及防...</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_10.png" alt="">
              <p>整形美容科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_11.png" alt="">
              <p>骨伤科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_12.png" alt="">
              <p>肛肠科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_13.png" alt="">
              <p>报告解读科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_14.png" alt="">
              <p>男科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_15.png" alt="">
              <p>内科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_16.png" alt="">
              <p>产科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_17.png" alt="">
              <p>中医科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_18.png" alt="">
              <p>消化内科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_19.png" alt="">
              <p>心理科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_20.png" alt="">
              <p>性病科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_21.png" alt="">
              <p>神经内科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_22.png" alt="">
              <p>心血管内科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_23.png" alt="">
              <p>口腔颌面科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_24.png" alt="">
              <p>眼科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_25.png" alt="">
              <p>营养科</p>
            </van-grid-item>
            <van-grid-item class="gg">
              <img src="../../assets/img/grid_26.png" alt="">
              <p>全部</p>
            </van-grid-item>
          </van-grid>
        </div>
      </div>
    </div>
    <!--按疾病-->
    <div class="By_disease">
      <div class="disease">
        <div style="color: black; width: 10rem">按疾病</div>
        <div class="gengduo">更多疾病></div>
      </div>
      <div class="diseasechildren">
        <div class="diseasechildrenone">
          <span @click="diseaseSearch(item.name)" v-for="(item,index) in diseaselist" :key="index">
            {{ item.name }}
          </span>
        </div>
      </div>
    </div>
    <!-- tab切换 -->
    <van-tabs v-model:active="active" color="#44d477">
      <van-tab title="全部" title-style="font-weight:normal;">
        <div @click="toDoctor(item)" v-for="(item, index) in doctor" :key="index" class="tablist">
          <div class="top">
            <div class="left">
              <img :src="item.img" alt="">
            </div>
            <div class="right">
              <p class="right-top">
                <span class="name">{{ item.name }}</span>
                <span class="border"></span>
                <span class="title">
                  {{ item.title }}
                  {{ item.clinic_name }}
                </span>
                <span class="tag" v-if="item.tag1">
                  {{ item.tag1 }}
                </span>
              </p>
              <p class="right-bottom">
                <span class="hospital">{{ item.hospital }}</span>
                <span class="type" v-if="item.tag2">
                  {{ item.tag2 }}
                </span>
                <span class="tagname" v-if="item.tag3">
                  {{ item.tag3 }}
                </span>
              </p>
            </div>
          </div>
          <div class="middle">
            <div v-html="item.desc"></div>
            <p>
              <span class="xing">
                {{ item.descrip }}
                <img :src="item.descrip_icon" alt="">
              </span>
              <span class="num">
                {{ item.descrip2 }}
                <span>
                  {{ item.descrip_num }}
                </span>
              </span>
              <span class="num">
                {{ item.descrip3 }}
                <span>{{ item.descrip3_num }}</span>
              </span>
            </p>
          </div>
          <div class="bottom">
            <span>
              {{ item.service_type_verbose }}
              ￥{{ item.price }}
            </span>
          </div>
        </div>
      </van-tab>
      <van-tab title="妇科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '妇科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="儿科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '儿科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="皮肤性病科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '皮肤科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="内科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '内科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="男科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '男科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="产科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '产科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="外科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '外科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="中医科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '中医科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="骨伤科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '骨科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="精神心理科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '精神科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="口腔颌面科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '口腔颌面科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="眼科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '眼科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="耳鼻咽喉科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '耳鼻咽喉科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="肿瘤及防治科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '肿瘤科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="整形美容科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '整形科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="报告解读科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '体检科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
      <van-tab title="营养科" title-style="font-weight:normal;">
        <div v-for="(item, index) in doctor" :key="index">
          <div v-if="item.clinic_name == '营养科'" class="tablist">
            <div class="top">
              <div class="left">
                <img :src="item.img" alt="">
              </div>
              <div class="right">
                <p class="right-top">
                  <span class="name">{{ item.name }}</span>
                  <span class="border"></span>
                  <span class="title">
                    {{ item.title }}
                    {{ item.clinic_name }}
                  </span>
                  <span class="tag">
                    {{ item.tag1 }}
                  </span>
                </p>
                <p class="right-bottom">
                  <span class="hospital">{{ item.hospital }}</span>
                  <span class="type">三甲</span>
                  <span class="tagname">{{ item.tag3 }}</span>
                </p>
              </div>
            </div>
            <div class="middle">
              <div v-html="item.desc"></div>
              <p>
                <span class="xing">
                  {{ item.descrip }}
                  <img :src="item.descrip_icon" alt="">
                </span>
                <span class="num">
                  {{ item.descrip2 }}
                  <span>
                    {{ item.descrip_num }}
                  </span>
                </span>
                <span class="num">
                  {{ item.descrip3 }}
                  <span>{{ item.descrip3_num }}</span>
                </span>
              </p>
            </div>
            <div class="bottom">
              <span>
                {{ item.service_type_verbose }}
                ￥{{ item.price }}
              </span>
            </div>
          </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import axios from '../../http/axios';

const diseaselist=ref([
  {
    name:'不孕不育'
  },{
    name:'阴道炎'
  },{
    name:'宫颈癌'
  },{
    name:'原发性痛经'
  },{
    name:'多囊卵巢综合症'
  },{
    name:'子宫肌瘤'
  },{
    name:'妇科炎症'
  },{
    name:'早孕'
  }
])

const router = useRouter()
const doctor = ref([])
const active = ref(0);
// 按疾病
const diseaseSearch=(item)=>{
  router.push({
    path:'/searchdoctor',
    query:{
      item:item
    }
  })
}

const departmentSearch=(item)=>{
  router.push({
    path:'/searchdoctor',
    query:{
      item:item
    }
  })
}
// 医生详情
const toDoctor = (item) => {
    router.push({
        path: '/tabdoctordetail',
        query: {
            item: JSON.stringify(item)
        }
    })
}

const wenzhen = () => {
  router.push({ path: '/Clinic' })
}
// 返回首页
const onClickLeft = () => {
  router.push({ path: '/home' })
}
const tosearch = () => {
  router.push({ path: '/searchdoctor' })
}

const getdoctorData = async () => {
  let res = await axios.get('/addres/doctorCY')
  console.log(res.data.data)
  doctor.value = res.data.data
}
getdoctorData()

</script>

